<template>
	<view style="position: relative;height:100vh" class="container_msg">
		<u-navbar title='📢  公告' :autoBack="true" :placeholder="true" bgColor="transparent"></u-navbar>
		<view style="width: 100%;height: 50vh;" v-if="noticeList.length===0">
			<u-empty
			        mode="message"
			        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
					width="100%"
					height="100%"
			>
			</u-empty>
		</view>
		<view style="width:660rpx;min-height:160rpx;margin:0 auto;padding-bottom: 100rpx;">
			<view class='noticeList' v-for="(v,i) in noticeList" :key='i' style="margin-top: 50rpx;" @click="contentShow(v)">
				<view style="color:#a2a2a2;font-size:24rpx;text-align: center;">{{v.createTime}}</view>
				<view class="item">
				<!-- 	<view style="margin-top: 10rpx;margin-left: 20rpx;">
						发布者:{{v.userName}}
					</view> -->
					<view class="title flex" style="margin-bottom: 0;">
						<view class="label" style="width:160rpx">发布标题：</view>
							<text :style="{'marginRight':'20rpx'}">{{v.title}}</text>
					</view>
					<view class="subTitle flex">
						<view class="label" style="width:160rpx">公开范围：</view>
							<text style="
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;margin-right: 20rpx;">{{v.list.map(item=>item.name).join('、')}}</text>
					</view>
					<view class="subTitle flex">
						<view class="label" style="width:160rpx">发布时间：</view>
							<text :style="{'marginRight':'20rpx'}">{{v.createTime}}</text>
					</view>
					<view class="subTitle flex">
						<view class="label" style="width:160rpx">发布内容：</view>
						<view  style="color:#13989a ;text-decoration: underline;">
							点击查看
						</view>
					</view>
					<view style="margin-top: 20rpx;">
						<image mode="aspectFill" style="width: 620rpx;height: 260rpx;border-radius: 10rpx;" :src="`https://${v.coverPicture}`"
							v-if="v.coverPicture&&(v.coverPicture.indexOf('jpg')>-1 || v.coverPicture.indexOf('png')>-1 || v.coverPicture.indexOf('jpeg')>-1)">
						</image>
					</view>

				</view>
			</view>
			<uni-load-more :status="status" v-show="noticeList.length!=0"></uni-load-more>
			
		</view>
		<u-popup :show="show"  @close="show=false" @open="show=true" bgColor='transparent' mode="bottom" :closeable="true" :closeOnClickOverlay="true">
			<view style="min-height: 25vh;max-height: 80vh;background-color: #fff;overflow-y: scroll;padding: 20rpx;padding-top: 130rpx;">
				<view style="background-color: #fff;line-height: 100rpx;text-align: center;position: absolute;top: 0rpx;left: 0;right: 0;">
					消息详情
				</view>
				<view style="overflow-x: hidden !important;
    max-width: 100vw; ">
					<u-parse :content="currContent.content" :tagStyle="style"></u-parse>
				</view>
				<view style="color:#a2a2a2;font-size:24rpx;text-align: right;margin-top: 50rpx;">发布时间:{{currContent.createTime}}</view>
				<view style="color:#a2a2a2;font-size:24rpx;text-align: right;margin-bottom: 50rpx;">公开范围:{{currContent.list&&currContent.list.length?currContent.list.map(item=>item.name).join('、'):''}}</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		friendlyDate
	} from '../../../util.js'
	let app = getApp();
	export default {
		data() {
			return {
				show:false,
				noticeList: [],
				value: 0,
				color:app.globalData.defaultColor,
				pageSize:10,
				pageNumber:1,
				total:1,
				status:'',
				currContent:'',
				style: {
					// 字符串的形式
					p: 'font-size:32rpx;width: 100%;word-wrap: break-word;word-break: break-all;',
					span: 'font-size: 30rpx',
					// img:'width:100%;height:auto;'
				}
			}
		},
		onLoad() {
			this.getBrandMessageVo()
			
		},
		
		onReachBottom(){
			if(this.noticeList.length>=this.total){
				this.status='noMore'
				return
			}
			this.pageNumber++
			this.getBrandMessageVo()
			
		},
		methods: {
			getBrandMessageVo(){
				uni.$u.http.get('/company/getBrandMessageVo',{params:{
					pageSize:this.pageSize,
					pageNumber:this.pageNumber
				}}).then(res=>{
					if(res.data){
						this.noticeList=[...this.noticeList,...res.data]
						this.total=res.total
						if(this.noticeList.length>=this.total){
							this.status='noMore'
						}else{
							this.status='more'
						}
					}
				})
			},
			contentShow(res){
				this.show=true
				this.currContent=res
			},
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep.container_msg{
		.u-tabbar__content__item-wrapper{
			border-top: 2rpx solid #f2f2f4;
		}
	}
	
	.flex {
		display: flex;
		align-items: center;
	}

	.list {
		width: calc(100%);
		background-color: white;
		border-radius: 16rpx;
		margin-top: 57rpx;
	}

	.list>view {
		padding: 20rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.label {
		width: 140rpx;
		color: #333;
		font-size: 28rpx;
	}

	.list>view:nth-last-child(1) {
		border-bottom: none;
	}

	.item {
		width: calc(100% - 40rpx);
		background-color: #f2f2f4;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
	}

	.title {
		color: #2f2f32;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		line-height: 40rpx;
	}

	.summary {
		color: #a8a8aa;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}
</style>
<style>
	page {
		background-color: white;
	}
</style>